<template>
  <div class="group">
    <div class="box">Helloworld</div>
    <div class="box">Helloworld</div>
    <div class="box">Helloworld</div>
    <div class="box">Helloworld</div>
  </div>
  <button @click="add">添加</button>
  <div id="table" v-html="html"></div>
  <input type="file" @change="read" />
  <button @click="read">读取</button>
</template>
<script>
import XLSX from '@/libs/xlsx.full.min.js';
import dataJson from '../../json/executive.json';
export default {
  data() {
    return {
      a: 1,
      b: 2,
      html: '',
    };
  },
  methods: {
    add() {
      console.log(`helloworld`);
      let prez = dataJson.filter(res =>
        res.terms.some(res => res.type === 'prez'),
      );
      prez = prez.map((res,index) => {
        let obj = {
          name: [res.name.first, res.name.middle, res.name.last].join(' '),
          birthday: res.bio.birthday,
        }
        /*if(index == 0){*/
          /*obj.three = '测试'*/
        /*}*/
        /*if(index == 5){*/
          /*obj.three = '测试'*/
        /*}*/
        return obj;
      });
      console.log(prez);
      console.log(`helloworld`);
      const worksheet = XLSX.utils.json_to_sheet(prez);

      //链接处理
      worksheet['A2'].l = {
        Target: 'https://www.baidu.com',
        Tooltip: '百度',
      };
      worksheet['A3'].s = {
        font: {
          color: {rgb: 'FF0187FA'},
        },
      };
      //渲染范围处理，添加单元格
      worksheet['!ref'] = 'A1:C46';
      worksheet['C1'] = {
        t : 's',
        v : '测试1'
      }
      worksheet['C7'] = {
        t : 's',
        v : '测试1'
      }
      //列表处理
      worksheet['!cols'] = [
        {
          wch : 30
        },
        {
          wch : 16
        },
        {
          wch : 16
        }
      ]
      console.log(worksheet);
      //合并单元格
      worksheet['!merges'] = [
        {
          s: {
            c: 2,
            r: 0,
          },
          e: {
            c: 5,
            r: 3,
          },
        },
      ];
      console.log(worksheet);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, '第一张表');
      XLSX.writeFile(workbook, '表2.xlsx', {
        compression: true, //压缩
      });
    },
    read(e) {
      console.log(e);
      let file = e.target.files[0];
      let fr = new FileReader();
      fr.onload = e => {
        let data = e.target.result;
        let wk = XLSX.read(data, {
          type: 'binary',
        });
        let sheet = wk.Sheets['第一张表'];
        console.log(sheet);
        let json = XLSX.utils.sheet_to_json(sheet);
        let ws = XLSX.utils.json_to_sheet(json);
        let container = document.getElementById('table');
        let html = XLSX.utils.sheet_to_html(ws);
        this.html = html.match(/<table>.+<\/table>/)[0];
      };
      fr.readAsBinaryString(file);
      /*console.log(workbook);*/
    },
  },
  mounted() {},
};
</script>
<style>
.box {
  height: 100px;
  border: 1px solid #000;
}
.group {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3,1fr);
  gap: 10px 20px;
  /*row-gap:30px;*/
  /*column-gap:10px;*/
}
</style>
